<nm-button [option]="{icon:'icon-search'}" (click)="action('openModal')"></nm-button>

<ng-container [ngSwitch]="option.layoutType">
    <ng-container *ngSwitchCase="'table'">
        <ng-container *ngTemplateOutlet="selectedTemp"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="'tree'">
        <ng-container *ngTemplateOutlet="selectedTemp"></ng-container>
    </ng-container>
</ng-container>

<ng-template #selectedTemp>
    <div class="selected">
        <ul>
            <li *ngFor="let item of value">
                <span class="label">{{item.label}}</span>
                <span class="icon-x" (click)="action('removeValue', item)"></span>
            </li>
        </ul>
    </div>
</ng-template>

<ng-template #template>
    <div class="content {{option.layoutType}}">
        <nm-tree #treeCom *ngIf="option.tree" [(option)]="option.tree"></nm-tree>
        <nm-table #tableCom *ngIf="option.table" [(option)]="option.table"></nm-table>
        <div class="selected" *ngIf="option.layoutType!= 'treeAndTable'">
            <ul>
                <li *ngFor="let item of selected">
                    <span class="label">{{item.label}}</span>
                    <span class="icon-x" (click)="action('remove', item)"></span>
                </li>
            </ul>
            <ng-container *ngTemplateOutlet="toolsTemp"></ng-container>
        </div>
    </div>
    <ng-container *ngIf="option.layoutType == 'treeAndTable'">
        <ng-container *ngTemplateOutlet="toolsTemp"></ng-container>
    </ng-container>
</ng-template>

<ng-template #toolsTemp>
    <nm-toolbar class="form">
        <nm-buttons>
            <nm-button [option]="{icon:'icon-x', title:'取消'}" (click)="action('cancel')"></nm-button>
            <nm-button class="orange" [option]="{icon:'icon-check', title:'确认'}" (click)="action('sure')"></nm-button>
        </nm-buttons>
    </nm-toolbar>
</ng-template>